<template>
  <div class="app">
     <!-- navbar组件 -->
     <van-nav-bar
      title="新增地址"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 地址填写栏 -->
    <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        save-button-text="保存并使用"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
        />
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import {areaList} from '@vant/area-data'
import { Toast } from 'vant';
export default {
    data() {
    return {
      areaList,
      searchResult: [],
    }
    },
    methods:{
      ...mapActions(['request_address_add']),
        onClickLeft(){
            this.$router.go(-1)
        },
        onSave(content) {
            Toast('save');
            console.log(content);
            this.request_address_add(content);
        },
        onDelete() {
            Toast('delete');
        },
        onChangeDetail(val) {
            if (val) {
            this.searchResult = [
          {
            name: '黄龙万科中心',
            address: '杭州市西湖区',
          },
            ];
        } else {
        this.searchResult = [];
        }}
    }
}
</script>

<style>

</style>